<template>
	<view class="sheet">
		<view class="icons">
			<view class="icons-item">
				<text class="iconfont icon-kefu"></text>
				<text class="icons-item-text">客服</text>
			</view>
			<view class="icons-item">
				<text class="iconfont icon-dianpu"></text>
				<text class="icons-item-text">店铺</text>
			</view>
			<view class="icons-item">
				<text class="iconfont icon-gouwuche"></text>
				<text class="icons-item-text">购物车</text>
			</view>
		</view>
		<view class="btn">
			<text class="btn-left">加入购物车</text>
			<text class="btn-right">立即购买</text>
		</view>
		<text class="tabDot">12</text>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.sheet {
		width: 750rpx;
		height: 110rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;

		justify-content: space-between;
		background-color: #ffffff;

		.icons {
			width: 50%;
			display: flex;
			justify-content: space-around;

			.icons-item {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-size: 26rpx;
				text-align: center;

				.icons-item-text {
					color: #666666;
				}

				.iconfont {
					font-size: 40rpx;
					color: #141414 !important;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			padding-right: 14rpx;

			.btn-left {
				width: 202rpx;
				height: 86rpx;
				border-bottom-left-radius: 40rpx;
				border-top-left-radius: 40rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #ff0000;
				font-size: 30rpx;
				color: #FFFFFF;
				border-style: none;
			}

			.btn-right {
				width: 202rpx;
				height: 86rpx;
				border-bottom-right-radius: 40rpx;
				border-top-right-radius: 40rpx;
				border-style: none;
				text-align: center;
				line-height: 90rpx;
				background-color: #ffa200;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.tabDot {
			width: 50rpx;
			height: 30rpx;
			border-radius: 25rpx;
			text-align: center;
			line-height: 30rpx;
			display: inline-block;
			background-color: #ff0000;
			font-size: 22rpx;
			color: #FFFFFF;
			position: absolute;
			padding-bottom: 2px;
			left: 36%;
		}
	}
</style>